<template>
	<!-- #ifdef APP-PLUS || H5 || MP-ALIPAY || MP-TOUTIAO-->
	<checkbox-group :name="name"><slot></slot></checkbox-group>
	<!-- #endif -->

	<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ -->
	<i-form-field :name="name" :value="checkedVals"><slot></slot></i-form-field>
	<!-- #endif -->
</template>

<script setup>
import { ref, watch } from 'vue'

const emit = defineEmits(['change', 'update:modelValue'])

const props = defineProps({
	name: {
		type: String,
		default: ''
	},
	modelValue: {
		type: Array,
		default() {
			return []
		}
	}
})

const checkedVals = ref('')
let children = []

watch(
	() => props.modelValue,
	nVal => {
		modelChange(nVal)
	}
)

const checkboxChange = e => {
	emit('change', e)
	emit('update:modelValue', e.detail.value)
}

const changeValue = (checked, target) => {
	let vals = []
	children.forEach(item => {
		if (item.checkedVal) {
			vals.push(item.value)
		}
	})
	checkedVals.value = vals
	let e = {
		detail: {
			value: vals
		}
	}
	checkboxChange(e)
}

const modelChange = vals => {
	children.forEach(item => {
		if (vals.value.includes(item.value)) {
			item.val = true
		} else {
			item.val = false
		}
	})
}
</script>

<style lang="scss" scoped></style>
